<template>
	<view class="container">
		<view class="dizhi" @click="tiaozhuan">
			<van-cell value=">">
				<template #title>
					<view class="neirong">
						<view class="tubiao">
							<van-icon name="user-circle-o" />
						</view>
						<view class="youce">
							<view class="name">
								姓名：{{dizhiArr[0].receiver}} &nbsp; {{dizhiArr[0].mobile}}
							</view>
							<view class="dizhi">
								地址：{{dizhiArr[0].province}}{{dizhiArr[0].city}}{{dizhiArr[0].area}}{{dizhiArr[0].addr}}
							</view>
						</view>

					</view>
				</template>
			</van-cell>
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in gouwuchedata">
				<view class="title">
					{{gouwuchedata[0].shopName}}
				</view>
				<view class="itembottom">
					<view class="xuanze">
						<label>
							<van-checkbox @change="xuanzhong(index)" :value="checkitem[index]"></van-checkbox>
						</label>
					</view>



					<!-- <radio checked="false" /> -->
					<view class="IMG">
						<image :src="item.pic" mode=""></image>
					</view>
					<view class="cebian">
						<view class="cebiantop">
							<view class="cebiantoptop">
								{{item.prodName}}
							</view>
							<view class="cebiantopbottom">
								{{item.skuName}}
							</view>
						</view>
						<view class="cebianbottom">
							<view class="jiage">
								￥{{item.price}}
							</view>
							<view class="cebianbottomright">
								<view class="shuliang">
									x{{item.prodCount}}
								</view>
								<view class="jisuan">
									<van-stepper @change="jinbuqi" :value="item.prodCount" :data-param1="item" />
								</view>

							</view>

						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="dibu">
			<van-submit-bar button-text="提交订单" @submit="onClickButton">
				<view class="anniu">
					<van-checkbox @change="onChange" :value="checked">全选 </van-checkbox>
					<view v-if="gouwuchedata.length!=0" class="qingkong" @click="DELgouwuche">清空</view>
				</view>

				<view class="heji">
					合计:
					<text class="jiagexiaoshu">￥</text>
					<text class="jiagezheng">{{zongjia}}</text>
					<text class="jiagexiaoshu">

					</text>
				</view>

			</van-submit-bar>
		</view>

		<van-dialog id="van-dialog" title="删除" message="删除成功" @close="CLOSE" :show="tanchuangshow" overlay
			show-confirm-button=true show-cancel-button=true />
	</view>

</template>

<script>
	import {
		getGouWuChe,
		getZongJia,
		tianjia,
		delgouwuche
	} from "../../../api/gouwuche.js"
	import {
		getDizhi
	} from "../../../utils/goumai.js"
	export default {
		data() {
			return {
				checked: false,
				dizhiArr: [],
				gouwuchedata: [],
				checkitem: [],
				duoxuanpanduan: true,
				basketIdArr: [],
				zongjia: 0,
				INDEX: 0,
				tanchuangshow: false,
				counts: 1
			}
		},
		onShow() {
			this.GetGouwuche()
			this.GETDIZHI()
			this.checkboxinit()
		},
		methods: {
			//提交按钮事件
			onClickButton() {
				// console.log("点击提交")
				uni.navigateTo({
					url: `/pages/goumai/goumai/goumai?brief=${this.gouwuchedata[this.INDEX].prodName}&price=${this.gouwuchedata[this.INDEX].price}&prodId=${this.gouwuchedata[this.INDEX].prodId}&skuId=${this.gouwuchedata[this.INDEX].skuId}&prodCount=${this.gouwuchedata[this.INDEX].prodCount}&shopId=${this.gouwuchedata[this.INDEX].shopId}&skuname=${this.gouwuchedata[this.INDEX].skuName}&imgarr=${this.gouwuchedata[this.INDEX].pic}&basketIdArr=`+this.basketIdArr
				})
			},
			//全选的点击事件
			onChange() {
				// console.log("点击全选")

				this.checked = !this.checked


				for (let i = 0; i < this.gouwuchedata.length; i++) {
					if (this.checkitem[i] == false) {
						this.duoxuanpanduan = true
					}

				}
				if (this.duoxuanpanduan == true) {
					for (let i = 0; i < this.gouwuchedata.length; i++) {
						this.checkitem[i] = true
						this.basketIdArr.push(this.gouwuchedata[i].basketId)
					}
					this.duoxuanpanduan = false

				} else {
					for (let i = 0; i < this.gouwuchedata.length; i++) {
						this.checkitem[i] = false
					}
					this.duoxuanpanduan = true
					this.basketIdArr = []
				}

				// console.log(this.basketIdArr, "basketIdArr")
				this.JISUANzongjia()
			},
			//按钮的单击选中事件
			xuanzhong(index) {
				// console.log("点击选中",index)
				this.INDEX = index
				this.checkitem[index] = !this.checkitem[index]

				// console.log(this.gouwuchedata, "gouwuchedata")
				if (this.checkitem[index] == true) {
					this.basketIdArr.push(this.gouwuchedata[index].basketId)
					console.log(this.basketIdArr,"basketIdArr")
					// console.log("true")
				} else {





					this.basketIdArr.pop(index)
					// if (!Array.isArray(this.basketIdArr)) {
					//     console.log("type error!");
					//     return;
					//   }

					//   var array = [];
					//   for (var i = 0; i < this.basketIdArr.length; i++) {
					//     if (!array.includes(this.basketIdArr[i])) { 
					//       array.push(this.basketIdArr[i]);
					//     }
					//   }

					// console.log(this.basketIdArr,"this.basketIdArr")
					// console.log("false")
				}
				for (let i = 0; i < this.gouwuchedata.length; i++) {
					if (this.checkitem[i] == false) {
						// console.log(this.checkitem[i], "this.checkitem[i]")
						this.checked = false
						break
					}

				}


				this.JISUANzongjia()
			},
			//获取用户地址
			async GETDIZHI() {
				let result = await getDizhi()
				this.dizhiArr = result.data.data
				// console.log(this.dizhiArr,"arr")
			},
			//跳转页面
			tiaozhuan() {
				uni.navigateTo({
					url: "/pages/dizhiliebiao/dizhiliebiao/dizhiliebiao"
				})
			},
			//获取购物车信息
			async GetGouwuche() {
				let result = await getGouWuChe({})
				let arr = result.data.data
				console.log(this.gouwuchedata, "this.gouwuchedata")
				this.gouwuchedata = arr[0].shopCartItemDiscounts[0].shopCartItems
				// console.log(this.gouwuchedata, "this.gouwuchedata")

			},
			//步进器默认设置为false （不点击）
			checkboxinit() {
				for (let i = 0; i < this.gouwuchedata.length; i++) {
					this.checkitem[i] = false
				}
			},
			//步进器数值联动
			jinbuqi(event) {
				let value = event.detail
				let item1 = event.currentTarget.dataset.param1;



				this.gouwuchedata.forEach((item) => {
					if (item.basketId == item1.basketId) {
						item.prodCount = value;
						this.TIANjiaGWC(item)
					}
				})
				if (item1.prodCount == value) {
					return
				}
				if (item1.prodCount > value) {
					this.counts = -1
				}

				if (item1.prodCount < value) {
					this.counts = 1
				}
				this.JISUANzongjia()
			},
			//计算总价
			async JISUANzongjia() {
				let result = await getZongJia(this.basketIdArr)
				// console.log(result, "result")
				this.zongjia = result.data.data.totalMoney
			},
			//添加购物车
			async TIANjiaGWC(item) {
				let result = await tianjia({
					basketId: item.basketId,
					prodId: item.prodId,
					skuId: item.skuId,
					shopId: item.shopId,
					count: this.counts,

				}).then((res) => {
					console.log("成功", res)
				}).catch((err) => {
					console.log("shibai", err)
				})
			},
			//删除购物车
			async DELgouwuche() {
				// console.log(this.basketIdArr, "basketIdArr")
				let result = await delgouwuche(this.basketIdArr)
				this.tanchuangshow = true
				this.zongjia = 0
				this.checkboxinit()
				this.GetGouwuche()
			},
			CLOSE() {
				this.tanchuangshow = false
			}
		}
	}
</script>

<style lang="scss">
	.list {
		.item {
			margin-top: 50rpx;

			.title {
				margin-left: 50rpx;
				font-weight: 900;
				font-size: 40rpx;
			}

			.itembottom {
				margin-top: 20rpx;
				display: flex;

				.xuanze {
					margin-left: 5rpx;
					display: flex;
					align-items: center;
					margin-right: 20rpx;
				}

				.IMG {
					margin-right: 10rpx;

					image {
						width: 200rpx;
						height: 200rpx;
					}
				}

				.cebian {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.cebiantop {
						.cebiantoptop {
							font-weight: 700;
							font-size: 35rpx;
						}

						.cebiantopbottom {
							font-size: 30rpx;
							font-weight: 200;
						}
					}

					.cebianbottom {
						display: flex;

						.jiage {
							color: red;
							width: 30%;

						}

						.cebianbottomright {
							width: 70%;
							display: flex;
							flex-direction: column;

							// background-color: red;
							.shuliang {
								text-align: center;
							}

							.jisuan {
								text-align: center;

							}
						}

					}
				}
			}
		}
	}

	.dibu {
		display: flex;
		align-items: center;
		margin-top: 150rpx;

		.anniu {
			display: flex;
			align-items: center;

			width: 45%;

			.qingkong {
				margin-left: 10rpx;
				font-size: 25rpx;
			}
		}

		.heji {
			width: 40%;

			margin-left: 0rpx;
			margin-right: 0rpx;
			display: flex;
			align-items: center;

			.jiagezheng {
				color: red;
				font-size: 50rpx;
			}

			.jiagexiaoshu {
				color: red;
				font-size: 30rpx;
			}
		}

	}

	.neirong {
		display: flex;
		width: 600rpx;

		.tubiao {
			width: 10%;
			margin-right: 20rpx;
		}

		.youce {
			width: 90%;

			display: flex;
			flex-direction: column;

			.name {}

			.dizhi {}
		}

	}
</style>